.border{
    border: 2px solid red;
    margin: 2px;
    }
    .flex{
        display: flex;
    }
    .justify-center{
        justify-content: center;
    }
    .item-center{
        align-items: center;
    }
    .border-radius{
        border-radius: 7px; 

    }




/* For Webkit browsers (e.g., Chrome, Safari) */
::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-thumb {
  background-color: #333; /* Dark color for the thumb */
  border-radius: 8px; /* More curved border radius for the thumb */
}

::-webkit-scrollbar-track {
  background-color: #222; /* Dark color for the track */
  border-radius: 8px; /* Curved edges for the track */
  margin: 2px; /* Optional: Adds space around the track */
}

/* For Firefox */
scrollbar-color: #333 #222; /* Dark color for the thumb and track */
scrollbar-width: thin; /* Ensures the scrollbar is thinner */

/* For modern browsers, wrapping the content with overflow and adding a container */
.scroll-container {
  scrollbar-gutter: stable both-edges; /* Ensures space for the scrollbar is reserved */
  overflow-y: auto;
  border-radius: 8px; /* Curved edges for the scrolling container itself */
}